<template>
	<div class="test">
		<div
			class="news-banner swiper mySwiper swiper-initialized swiper-horizontal swiper-grid swiper-grid-column swiper-backface-hidden"
			style='text-align:center'>
			<div class="swiper-wrapper">
				<div class="banner-item swiper-slide" v-for="item in banners">
					{{item}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getTopLessonApi,
		getGoodteacherApi,
		getLessonListApi,
		getBannerApi
	} from '@/api/Lesson'
	import Swiper from 'swiper'
	export default {
		data() {
			return {
				banners: [],
				bannerSwiper: null
			}
		},
		created() {
			this.banners = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
			this.$nextTick(() => {
				this.bannerSwiper = new Swiper(".news-banner", {
					slidesPerView: 3,
					grid: {
						rows: 3,
					},
					spaceBetween: 30,
					// autoHeight: true,
					// watchSlidesProgress: true,
					// slidesPerView: 'auto',
					// loop: true,
					// autoplay: true,
				});
			})
			// this.getBanner()
		},
		methods: {
			// getBanner() {
			// 	getBannerApi({
			// 		menuid: 2495,
			// 	}).then(res => {



			// 	})
			// },
		}
	}
</script>

<style lang="less">
	.news-banner {
		max-width: 1600px;
		background-color: #ccc;
		margin: 0 auto;
		position: relative;
		overflow: hidden;

		.banner-item {
			height: 100px;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30px;
			font-weight: bold;
		}
	}
</style>